<template>
  <div>
    <header class="adminui-header" >
    <div class="adminui-header-left">
      <div class="logo-bar">
        <img class="logo" src="/img/logo.png" />
        <span>山西省交通信息通信有限公司|项目管理平台</span>
      </div>
      <div class="panel-item hidden-sm-and-down" @click="
						$store.commit(
							'TOGGLE_menuIsCollapse',
							!$store.state.global.menuIsCollapse
						)
					">
        <el-icon>
          <indent v-if="menuIsCollapse" />
          <outdent v-else />
        </el-icon>
      </div>
      <div class="panel-item hidden-sm-and-down" @click="refreshTab()">
        <el-icon>
          <refresh />
        </el-icon>
      </div>
    </div>

    <div class="adminui-header-right">
      <userbar></userbar>
    </div>
  </header>
 
  <div class="contract-detail"  >
    <!-- 项目标题栏 -->



    <div class="header">
      <div class="title-section">
        <div class="title">
          <span class="project-name">{{ contract.projectName }}</span>
          <el-tag size="small" class="status-tag" type="success">{{ $dictUtils.getDictLabel("project_status", contract.projectStatus, '-') }}</el-tag>
        </div>
        <div class="right-icon " >
          <div class="right-item" @click="bindDetails">
            <div class="copy-btn">
          <el-icon><Document /></el-icon> 
        </div>
        详情
          </div>
          <div class="right-item" @click="bindBack">
            <div class="copy-btn">
              <el-icon><ArrowLeftBold /></el-icon>
        </div>
        返回
          </div>
        </div>
        
      </div>
      
      <!-- 合同基本信息 -->
      <div class="contract-basic-info">
        <div class="info-row">
          <div class="info-item">
            <div class="label">合同名称：</div>
            <div class="value" v-if="contract.contractList&&contract.contractList.length">{{ contract.contractList[0].contractName}}</div>
          </div>
          <div class="info-item">
            <div class="label">业主单位：</div>
            <div class="value">{{ contract.companyName }}</div>
          </div>
        </div>
      </div>
      
      <!-- 合同金额信息 -->
      <div class="amount-info">
        <el-row gutter="20">
          <!-- 合同金额卡片 -->
          <el-col :span="8">
            <div class="amount-card" v-if="contract.contractList&&contract.contractList.length">
              <div class="amount-main">
                <div class="amount-title">合同金额</div>
                <div class="amount-value" >¥ {{ contract.contractList[0].contractAmount||0 }}</div>
              </div>
              <div class="amount-detail">
                <div class="detail-row">
                  <span>税率(%)</span>
                  <span class="text-right">{{contract.contractList[0].taxRate||0 }}</span>
                </div>
                <div class="detail-row">
                  <span>质保金</span>
                  <span class="text-right">¥ {{ contract.contractList[0].taxRate||0 }}</span>
                </div>
      
              </div>
            </div>
            <div class="amount-card">
              <div class="amount-detail">          
                <div class="detail-row">
                  <span>签订时间</span>
                  <span class="text-right"> {{ contract.contractList[0].contractSignTime }}</span>
                </div>
                <!-- <div class="detail-row">
                  <span>工期</span>
                  <span>{{ contract.duration }}天</span>
                </div> -->
                <div class="detail-row">
                  <span>合同类型</span>
                  <span class="nature-tag text-right">		  {{ $dictUtils.getDictLabel("contract_type", contract.contractList[0].contractType, '-') }}</span>
                </div>
              </div>
            </div>
          </el-col>
 
          <!-- 开票信息卡片 -->
          <el-col :span="8">
            <div class="amount-card " style="height: 337px;">
              <div class="amount-main">
                <div class="amount-title">开票信息</div>
                <div class="amount-value sub">累计开票：¥ {{ contract.cumulativeTicket||0}}</div>
              </div>
              <div class="amount-detail">
                <template  v-for="(item, idx) in contract.ticketList">
                <div class="detail-row bg"  v-if="idx<2">
                  
                  <div class="row-item">
                    <span>¥ {{ item.ticketAmountTax}}</span>
                  <span>   {{ $dictUtils.getDictLabel("ticket_type", item.ticketType, '-') }}</span>
                  </div >
                  <div class="row-item">
                    <span>{{ item.ticketDate }}</span>
                    <span>{{ item.ticketAmountTax }}</span>
                  </div>
               
                </div>  </template>
              </div>
            </div>
          </el-col>
          <!-- 回款信息卡片 -->
          <el-col :span="8">
            <div class="amount-card" style="height: 337px;">
              <div class="amount-main">
                <div class="amount-title">回款信息</div>
                <div class="amount-value sub">累计回款：¥ {{ contract.cumulativePayment }}</div>
              </div>
              <div class="amount-detail">
                 <template  v-for="(item, idx) in contract.paymentList">
                <div class="detail-row bg"  v-if="idx<2">
                  <div class="row-item">
                    <span>¥ {{item.paymentAmt }}</span>
                    <!-- <span>{{ item.type }}</span> -->
                  </div>
                 <div class="row-item">
                  <span>{{ item.paymentDate }}</span>
                  <span>{{ item.paymentAmt }}</span>
                 </div>
                 
                </div></template>
              </div>
            </div>
          </el-col>
       
        </el-row>
      </div>
      
    
    </div>
    
    <!-- 下游信息 -->
    <div class="downstream-info">
      <div class="section-title">下游信息</div>
      
      <div class="summary-cards">
        <div class="card">
          <div class="card-title">累计合同金额</div>
          <div class="card-value">¥{{ contract.cumulativePurContract }}</div>
        </div>
        <div class="card">
          <div class="card-title">累计收票金额</div>
          <div class="card-value">¥{{ contract.cumulativeReceipt}}</div>
        </div>
        <div class="card">
          <div class="card-title">累计支付金额</div>
          <div class="card-value">¥{{  contract.cumulativePay }}</div>
        </div>
        <div class="card">
          <div class="card-title">剩余应付金额</div>
          <div class="card-value">¥{{ contract.balance }}</div>
        </div>
        <!-- <div class="card">
          <div class="card-title">预定合同总数</div>
          <div class="card-value">{{  contract.cumulativeReceipt }}</div>
        </div> -->
      </div>
    </div>
    
    <!-- 合同列表 -->
    <div class="contract-list">
      <el-table :data="contract.purContractList" border style="width: 100%"  @row-click="bindJump">
        <el-table-column prop="contractNo" label="合同编号" width="150"></el-table-column>
        <el-table-column prop="contractName" label="合同名称" min-width="200"></el-table-column>
        <el-table-column prop="downType" label="合同类型" width="140">
          <template #default="{ row }">
              {{ $dictUtils.getDictLabel("claim_type", row.downType, '-') }}
            </template>
        </el-table-column>
        <el-table-column prop="companyName" label="签订单位" min-width="180"></el-table-column>
        <el-table-column prop="contractSignTime" label="签订时间" width="120"></el-table-column>
        <el-table-column prop="contractAmount" label="合同金额" width="140">
          <template #default="scope">
            ¥{{ scope.row.contractAmount||0 }}
          </template>
        </el-table-column>
        <el-table-column prop="taxRate" label="税率(%)" width="80"></el-table-column>
        <el-table-column prop="qualityGuaranteeFund" label="质保金" width="120">
          <template #default="scope">
            ¥{{ scope.row.qualityGuaranteeFund||0 }}
          </template>
        </el-table-column>
        <el-table-column prop="cumulativeInvoiceAmount" label="收票金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.cumulativeInvoiceAmount||0}}
          </template>
        </el-table-column>
   
        <el-table-column prop="cumulativePaymentAmount" label="累计支付金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.cumulativePaymentAmount||0 }}
          </template>
        </el-table-column>
        <el-table-column prop="cumulativePaymentRatio" label="累计支付比例" width="120">
      
        </el-table-column>
      </el-table>
    </div>
  </div>



  <div class="contract-detail"  v-if="isPage==2">
    <el-dialog
    v-model="dialogVisible"
    title="项目详情"
    width="1280px"
    :before-close="handleClose"
  >
  <PorjectDetails   :id="contractId"  :basisType="basisType" :cusType="1" />
  </el-dialog>

     
  </div>
  <div class="contract-detail"  v-if="isPage==3">
    <el-dialog
    v-model="dialogVisible3"
    title="合同详情"
    width="1280px"
    :before-close="handleClose"
  >
    <purchaseDetails :purchaseId="purchaseObj.purchaseId"  :projectId="purchaseObj.projectId" :contractNewId="purchaseObj.id" :cusType="1" />
  </el-dialog>
  </div>
  
</div>
</template>

<script>
import getProject from "@/api/scroll/index"
import userbar from "../../layout/components/userbar.vue";
import correspondentService from '@/api/correspondent/correspondentService'
import PorjectDetails from '../projectDetails/projectDetails'
import purchaseDetails from  "../purchaseDetails/purchaseDetails"
export default {
  name: 'ContractDetail',
  components: { userbar,PorjectDetails,purchaseDetails },
  data() {
    return {
      contractId: '', // 存储路由传入的合同ID
      loading: false,
      contract: {
        projectName: '数字化转型工程项目',
        status: '在建',
        contractName: '数字化转型工程项目合同',
        trustUnit: '山西交工集团',
        contractAmount: 12580000,
        taxRate: '6%',
        depositAmount: 629000,
        signDate: '2023-12-05',
        duration: 365,
        nature: '工程',
        contractList:[{contractSignTime:''}],
        basisType:"",
     
      },
      purchaseObj:{},
      isPage:1,
      dialogVisible:false,
      dialogVisible3:false,
    }
  },
  created() {
    // 获取路由参数
    this.contractId = this.$route.query.id || '';
    this.basisType= this.$route.query.basisType || '';
    this.isPage=this.$route.query.isPage ?this.$route.query.isPage:1;

   
    if(this.isPage==3){
      this.dialogVisible3=true;
      this.purchaseObj.purchaseId=this.$route.query.purchaseId;
      this.purchaseObj.projectId=this.$route.query.projectId;
      this.purchaseObj.id=this.$route.query.contractId
    }

    if(this.isPage==2){
      this.dialogVisible=true;
    }
    this.getInfo()
  },
  methods: {
    getInfo(){
      // if (!this.contractId) {
      //   this.$message.error('合同ID不能为空');
      //   return;
      // }
      getProject.getProjectLarge({id:this.contractId}).then(res=>{
        this.contract=res
      })
    },
    formatNumber(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },

    goBack() {
      this.$router.go(-1);
    },
    bindDetails(){
      // this.$router.push(`/projectDetails/projectDetails?id=${this.contractId}&basisType=${this.basisType}`);
      this.isPage=2;
      this.dialogVisible=true;
    },
    bindBack(){
      this.$router.push('/scroll')
    },
    bindJump(val){
     this.purchaseObj.purchaseId=val.purchaseId;
      this.purchaseObj.projectId=val.projectId;
      this.purchaseObj.id=val.id
        this.dialogVisible3=true;
        this.isPage=3;
      // this.$router.push({
      //   path: '/purchaseDetails/purchaseDetails',
      //   query: { projectId: contract.project.id,id:contract.id,purchaseId:contract.purchase.id}
      // });

      // correspondentService.queryById({id:val.})
    }
  }
}
</script>

<style scoped lang="scss">
.contract-detail {
  padding: 20px;
  background-color: #f5f7fa;
  
  .header {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    
    .title-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      .title {
        display: flex;
        align-items: center;
        
        .project-name {
          font-size: 20px;
          font-weight: 600;
          color: #303133;
          margin-right: 12px;
        }
        
        .status-tag {
          font-size: 12px;
        }
      }
      
      .copy-btn {
        font-size: 16px;
        color: #409EFF;
        cursor: pointer;
        margin-right: 2px;
      }
      .right-icon{
        font-size: 14px;
          display: flex;
          align-items: center;
          cursor: pointer;
          color: #409EFF;
      }
      .right-item{
          display: flex;
          align-items: center;
          cursor: pointer;
          color: #409EFF;
          margin-right: 20px;
      }
    }
    
    .contract-basic-info {
      margin-bottom: 20px;
      
      .info-row {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        
        .info-item {
          display: flex;
          margin-right: 40px;
          
          .label {
            font-size: 14px;
            color: #606266;
            margin-right: 8px;
          }
          
          .value {
            font-size: 14px;
            color: #303133;
            font-weight: 500;
          }
        }
      }
    }
    
    .amount-info {
      margin-bottom: 24px;
      .el-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .el-col {
        padding-left: 0 !important;
        padding-right: 20px !important;
        &:last-child {
          padding-right: 0 !important;
        }
      }
    }
    
    .other-info {
      .info-row {
        display: flex;
        
        .info-item {
          display: flex;
          flex-direction: column;
          margin-right: 40px;
          
          .label {
            font-size: 14px;
            color: #909399;
            margin-bottom: 8px;
          }
          
          .value {
            font-size: 14px;
            color: #303133;
          }
        }
      }
    }
  }
  
  .downstream-info {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 16px;
    }
    
    .summary-cards {
      display: flex;
      justify-content: space-between;
      gap:20px;
      .card {
        flex: 1;
        text-align: center;
        padding: 16px;
        border: 1px solid #eee;
        border-radius: 20px;
        .card-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }
        
        .card-value {
          font-size: 18px;
          color: #303133;
          font-weight: 600;
        }
      }
    }
  }
  
  .contract-list {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    
    :deep(.el-table) {
      th {
        background-color: #f5f7fa;
        color: #606266;
      }
      
      .el-table__row {
        td {
          padding: 8px 0;
        }
      }
    }
  }
}
.amount-card {
  background: rgba(248, 248, 248, 1);
  border-radius: 12px;
  padding: 24px 24px 16px 24px;
margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
}
.amount-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.amount-title {
  font-size: 16px;
  color: #222;
  font-weight: 500;
  margin-bottom: 8px;
}
.amount-value {
  font-size: 24px;
  color: #222;
  font-weight: bold;
  margin-bottom: 0;
}
.amount-value.sub {
  font-size: 16px;
  color: #666;
  font-weight: 400;
}
.amount-detail {
  margin-top: 8px;
}
.detail-row {
  
  font-size: 14px;
  color: #333;
  padding: 6px 0;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &.bg{
    display: block;
    background: #fff;
  }
  .text-right{
    text-align: right;
  }
  &:last-child {
    border-bottom: none;
  }
  span {
    min-width: 80px;
    text-align: left;
    color: #222;
    font-size: 14px;
  }
  span.nature-tag {
    color: #1bc47d;
    font-weight: 500;
  }
  .row-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 10px;
  }
}
</style>
